<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Appointment Registration</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/appointment/appointment.js"></script>
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        
        	<%-- header-container --%>
            <s:set var="mode" value="'edit'"/>
            <jsp:include page="/WEB-INF/content/appointment/AppointmentMenuContainer.jsp" flush="true"/>
            
            <div class="notice marker-on-bottom bg-darkRed fg-white text-center">
            	<h2>
            		<div class="user-profile-image place-left">
						<s:if test="%{guiAppointment.patient.male}">
							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
						</s:if>
						<s:elseif test="%{guiAppointment.patient.female}">
							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
						</s:elseif>
					</div>
					<div class="user-profile-info-container">
						<div class="user-profile-info">
							<div class="subheader">${guiAppointment.patient.name}</div>
							<div class="subheader">
								${guiAppointment.patient.age} <span class="subheader-secondary">years old</span>
							</div>
						</div>
					</div>
				</h2>
            	<div>Please select a date and time for change the appointment.</div>
            </div>
            
           <div id="appointment-date-select-container">
				<h2 class="text-center">
					<s:if test="%{existAptPrevDate}">
						<span>
							<a class="date-navigation" href="${contextPath}/appointment/edit?id=${guiAppointment.appointmentId}&aptDate=${aptPrevDate}">
								<i class="icon-arrow-left-4" title="${aptPrevDate}"></i>
							</a>
						</span>
					</s:if>
					<span>
						<div id="appointment-date-picker" class="input-control text date-picker" data-date="${aptDate}" data-role="datepicker" data-format='yyyy-mm-dd'>
							<input id="appointment-date-picker-input" type="text" name="aptDate" value="${aptDate}">
							<div class="btn-date"></div>
						</div>
					</span>
					<span>
						<a class="date-navigation" href="${contextPath}/appointment/edit?id=${guiAppointment.appointmentId}&aptDate=${aptNextDate}">
							<i class="icon-arrow-right-4" title="${aptNextDate}"></i>
						</a>
					</span>
				</h2>
			</div>
            
        	<div id="appointment-registration-form-container" class="form-container text-center">
            	<form id="appointment-edit-form" class="registration-form appointment-form" action="${contextPath}/appointment/update" method="post">
                	<input type="hidden" id="appointmentId" name="guiAppointment.appointmentId" value="${guiAppointment.appointmentId}" />
                    <input type="hidden" name="guiAppointment.patient.userId" value="${guiAppointment.patient.userId}" />
                    <input type="hidden" name="guiAppointment.date" value="${aptDate}" />
                    <input type="hidden" name="aptDate" value="${aptDate}" />
                	<fieldset>
                        <legend>Time</legend>
                        <div id="appointment-time-container">
                        
                        	<s:set var="isAptTimeSelected" value="false"/>
                        	<s:iterator var="sHour" value="%{dayAppointmentMap}" status="hourStatus">
								<s:iterator var="sMinute" value="%{#sHour.value}" status="minuteStatus">
									<div class="input-control radio default-style">
										<label>
		                        			<s:set var="sAptTime" value="%{#sHour.key + ':' + #sMinute.key}"/>
											<s:if test="%{#sMinute.value != null}">
												<s:set var="appointment" value="%{#sMinute.value}" />
												<s:if test="%{
													(#appointment.patient.userId == guiAppointment.patient.userId) &&
													(guiAppointment.time == #sAptTime)}">
													<s:set var="isAptTimeSelected" value="true"/>
													<input type="radio" name="guiAppointment.time" value="${sHour.key}:${sMinute.key}" checked="checked"/>
												</s:if>
												<s:else>
				                        			<%-- appointment is not current patient's appointment--%>
													<input type="radio" name="guiAppointment.time" value="${sHour.key}:${sMinute.key}" disabled="disabled"/>
												</s:else>
			                        		</s:if>
	                                        <s:else>
	                                        	<s:if test="%{#isAptTimeSelected}">
	                                        		<input type="radio" name="guiAppointment.time" value="${sHour.key}:${sMinute.key}"/>
	                                        	</s:if>
	                                        	<s:else>
	                                        		<s:set var="isAptTimeSelected" value="true"/>
	                                        		<input type="radio" name="guiAppointment.time" value="${sHour.key}:${sMinute.key}" checked="checked"/>
	                                        	</s:else>
	                                        </s:else>
	                                        <span class="check"></span>
	                                        ${sHour.key}:${sMinute.key}  
										</label>
									</div>
								</s:iterator>
								<br/>
							</s:iterator>
							<br clear="all"/>
                        </div>
                    </fieldset>
                    <div class="form-button-container" style="margin-left: 270px;">
                        <a onClick="$('#appointment-edit-form').submit(); return false;">
                            <div class="form-button tile half-vertical subheader-secondary bg-cobalt fg-white">
                                Update <i class="icon-pencil on-right smaller"></i>
                            </div>
                        </a>
                        <a id="btn-cancel" href="${contextPath}/appointment/list?aptDate=${aptDate}">
                            <div class="form-button tile half-vertical subheader-secondary bg-cyan fg-white">
                                Cancel <i class="icon-cancel-2 on-right smaller"></i>
                            </div>
                        </a>                            
	                </div>
                </form>
            </div>     
            
            <br clear="all"/>   	
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>